ターミナル操作のアニメーション化をユースケース毎にまとめてみた
ターミナル上での操作を解説する際の主な手法として、入力コマンドの羅列があります。ただ、羅列による解説には理解してもらえる限界があると思います。以下の操作については恐らく大丈夫でしょう。
- 文字列の入力
- エディタのコマンド操作
問題は、以下のような時間経過及び遷移が伴うケースです。
- 処理毎に文字列が出力される
- 画面上の描写が一新される
考えられうる対策の一つとして、ターミナル上操作及び出力のアニメーション化があります。確認できた範囲で、状況に応じた方法をまとめてみました。
手軽にWebで公開設定を切り替えられるようにしたい
すでに公開したアニメーションについて、変更を加えたい場合に以下のような前提があるとします。
- アニメーション設定そのものは削除しない
- ブログ記事等の公開設定そのものは変えない
この場合はasciinemaが適していると思われます。
外部サービスに依存せずにGIFアニメーション単体として持ちたい
今回は2つの手段を紹介します。
テキストとして記録した作業内容を元に作成する
2018年7月29日にGithub Trendsにも上がっていたようです。
ポイント
操作結果はYAMLとして記録されているので、調整を加えたい場所があれば即変更できるところが強みです。
導入
npm導入が必要になります。すでにnpmを使っている場合は準備の手間も省けると思います。尚、terminalizerのコマンド操作をterminalizerで記録しようとしましたが、流石に想定されていないようで正常な出力になりませんでした。
anyenv install nodenv exec $SHELL -l nodenv install <version> nodenv local <version> npm install -g terminalizer exec $SHELL -l terminalizer init # 記録開始 terminalizer record demo # input any, and Ctrl + D terminalizer render demo -o test
動画として記録し、コマ送り再生をスクリーンキャプチャして作成する
ttyrecで作成したレコードを再生して、連続キャプチャすることによりgifアニメーションを作成します。
実際に作成したgifアニメーションを以下のエントリーにて公開しています。
ポイント
ttyrecのポイントではありますが、ttytimeで再生時間を秒単位にて確認できるところです。
導入
ttygifはgoで作成されているため、すでにgoを使っている場合は準備の手間も省けると思います。尚、ttyrecのコマンド操作をttyrecで記録しようとしましたが、流石に想定されていないようで正常な出力になりませんでした。
brew install ttyrec brew install go echo 'export GOPATH=$HOME/.go' >> ~/.zshrc echo 'export PATH=$PATH:$GOPATH/bin' >> ~/.zshrc exec $SHELL -l go get github.com/sugyan/ttygif # 記録開始 ttyrec test.tty # input any exit ttygif -in test.tty -out test.gif
まとめ
実行するコマンド群を手順としてテキスト記載することは踏襲する上で大変有り難いのですが、実際に入力した際に表示される出力が問題ないか不安に駆られることもあります。入力結果も合わせて記載することで、より確実な手順になることが期待できます。
また、記事に沿って操作する側の場合、実際にとった入力と対応が合っていたかどうかの確認依頼も、gifアニメーションにて時間軸も合わせることでより正確になるはずです。
複数の手段を紹介しましたが、全てを導入する必要はないと思っています。お好みでどうぞ。
